<!--管理员考试安排-->
<template>
  <div class="assessment-container" style="margin:0;width:100%">
    <div class="search-container" style="margin:0">
      <div class="search-container-left">
        <div class="search-container-item" style="margin-right:15px">
          <span>学期:
            <span style="color:red">*</span>
          </span>
          <el-select
            v-model="xq" 
            size="mini"
            placeholder="请选择学期"
            style="width: 140px"
            clearable
          >
            <el-option
              v-for="(item,index) in xqList"
              :key="index"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-button" style="margin: 2px 15px 0 0;" @click="queryList">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span>查询</span>
        </div>
        <div class="search-button" style="background: #f1fff8;border: 1px solid #02c86c;width:130px;margin:2px 15px 0 0" @click="addExam">
          <!-- <img src="../../../assets/assessment/icon-search.png" alt="" /> -->
          <span style="color:#02c86c;">新建考试批次</span>
        </div>
        <div class="search-button" style="background: #f1fff8;border: 1px solid #02c86c;width:160px;margin:2px 15px 0 0" @click="toMakeupScoreEntry">
          <!-- <img src="../../../assets/assessment/icon-search.png" alt="" /> -->
          <span style="color:#02c86c;">查看全部考试安排</span>
        </div>
      </div>
    </div>
    <div class="plan-entry-table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="650"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column
          prop="lrcj"
          label="操作"
          width="150"
          align="center"
          class-name="" 
          label-class-name=""
        >
          <template slot-scope="scope">
            <div class="bk-lucj-import-button" @click="delExam(scope.row.id)">
              <img
                src="../../../assets/assessment/icon-plan-record-detail.png"
                alt=""
              />
              <span>删除</span>
            </div>
          </template>
        </el-table-column>
      
        <el-table-column prop="planname" label="批次" width="170" align="center">
        </el-table-column>
        <el-table-column
          prop="checktype"
          label="考核类型"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="wl" label="考试时间" width="492" align="center">
          <template slot-scope="scope">
            <!-- <el-date-picker
              v-model="scope.row.examRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changePick(scope.row)">
            </el-date-picker> -->
            <el-date-picker
              v-model="scope.row.exastartdate"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width:180px;margin-right:15px"
              placeholder="开始日期"
              @change='changeDate(scope.row)'>
            </el-date-picker>
            <span style="margin-right:15px">到</span>
            <el-date-picker
              v-model="scope.row.exaenddate"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width:180px"
              placeholder="结束日期"
              @change='changeDate(scope.row)'>
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="exanumber" label="考试门次" width="220" align="center">
        </el-table-column>
          <el-table-column prop="dc" label="设置考试课程" width="220" align="center">
          <template slot-scope="scope">
            <div class="bk-lucj-expot-button" style="background: #f1f8fe;border: 1px solid #51aef6;" @click="setCourse(scope.row.id)">
              <img src="../../../assets/assessment/icon-set.png" alt="" />
              <span style="color: #51aef6;">设置</span>
            </div>
          </template>
        </el-table-column>
          <el-table-column prop="dcc" label="考试安排" width="240" align="center">
          <template slot-scope="scope">
            <div class="bk-lucj-expot-button" @click="startPlan(scope.row)">
              <img src="../../../assets/home/icon-function-query-performance.png" alt="" />
              <span>开始排考</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-bottom: 50px;">
        <el-pagination
          style="width:auto;float:right;margin-bottom:50px;padding:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="新建考试批次"
      :visible.sync="showExportReportDialog"
      width="983px"
      class="manual-entry-container"
      @close="closeDia"
    >
      <div class="assessment-edit-plan-container">
        <div class="my-form-container" style="width: 800px;height: 200px;margin: 50px auto 18px">
          <el-row class="my-form-item" style="height:100px">
            <el-col :span="24">
              <div class="my-form-item-label" style="padding-left: 80px;">考试批次：<span style="color:red">*</span></div>
              <div class="my-form-item-value" style="line-height:100px">
                <el-select
                  v-model="khType"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in reportTypepss"
                    :key="index"
                    :label="item.value"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row class="my-form-item" style="height:100px;border-bottom:none">
            <el-col :span="24">
              <div class="my-form-item-label" style="padding-left: 80px;">考试批次名称：<span style="color:red">*</span></div>
              <div class="my-form-item-value" style="line-height:100px"><el-input style="width: 206px;" v-model="batchName" placeholder="请输入考试批次名称"></el-input></div>
            </el-col>
          </el-row>
        </div>
        <div
          slot="footer" style="text-align:center;margin-top:50px"
        >
          <div class="button-group">
            <div @click="submitExam">添 加</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqGetXqList } from "@/api/admin1/check";
import {adminSelectExamplan,examplanSave,examplanUpdate,examplanDel } from "../../../api/courseAchievement/entryResults";

export default {
  data() {
    return {
      current:1,
      size:10,
      total:'',
      // examRange:[],
      exastartdate:'',
      exaenddate:'',
      xq: "",
      xqList: [],
      tableData: [],
      coursename: '',
      showExportReportDialog:false,
      khType:'',
      batchName:'',
      reportTypepss:[
        {
          value: "期中",
          label: "期中",
        },
        {
          value: "期末",
          label: "期末",
        },
      ],
    };
  },
  mounted(){
    this.termAll();
    this.queryList();
  },
  methods: {
    //单个批次考试时间修改
    changePick(row){
      // this.exastartdate = row.examRange[0];
      // this.exaenddate = row.examRange[1];
      let obj = {
        id:row.id,
        exastartdate:this.exastartdate,
        exaenddate:this.exaenddate
      }
      examplanUpdate(obj).then(res=>{
        if(res.data.code == 200){
          this.queryList()
        }
      })
    },
    handleCurrentChange(val) {
      this.current = val;
      this.queryList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.queryList();
    },
    closeDia(){
      this.khType = '';
      this.batchName = '';
    },
    // 获取学期
    async termAll() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    toMakeupScoreEntry(srr) {
      this.$router.push({path:"/student/examination/examinationlist"});
    },
    queryList: function () {
      return new Promise(() => {
        adminSelectExamplan(this.current,this.size,this.xq).then(res => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          // this.tableData.forEach((element,index) => {
          //   this.tableData[index].this.examRange.push(element.exastartdate,element.exaenddate)
          // });
          // console.log(this.examRange)
        })
      })
    }, 
    //新建单个批次
    submitExam(){
      let obj = {
        checktype:this.khType,
        planname:this.batchName,
        termid:this.xq
      }
      if(this.khType == '' || this.batchName == ''){
        this.$message({
          showClose: true,
          message: '必填项不能为空！',
          type: "error",
        });
      } else {
        examplanSave(obj).then(res=>{
          if(res.data.code == 200){
            this.showExportReportDialog = false;
            this.queryList();
          }
        })
      }
    },
    //新建考试批次
    addExam(){
      if(this.xq == ''){
        this.$message({type:'error',message:'请先选择学期！'})
      } else {
        this.showExportReportDialog = true;
      }
    },
    //单个批次考试时间修改
    changeDate(row){
      if(row.exastartdate && row.exaenddate != ''){
        if(new Date(row.exastartdate).getTime() > new Date(row.exaenddate).getTime()){
          this.$message({
            showClose: true,
            message: '开始时间不能大于结束时间！',
            type: "error",
          });
        } else {
          let obj = {
            id:row.id,
            exastartdate:row.exastartdate,
            exaenddate:row.exaenddate
          }
          examplanUpdate(obj).then(res=>{
            if(res.data.code == 200){
              this.queryList()
            }
          })
        }
      }
    },
    //删除单个批次
    delExam(id){
      this.$confirm('确认要删除吗？')
        .then(_ => {
          examplanDel(id).then((res) => {
            if(res.data.code == 200 && JSON.stringify(res.data.data) === '{}'){
              this.$message({
                showClose: true,
                message: '删除成功！',
                type: "success",
              });
              this.queryList();
            } else {
              this.$message({ type: "error", message: res.data.data, duration:5000 });
              this.queryList();
            }
          })
        })
    },
    //开始排考
    startPlan(row){
      this.$router.push({
        path: "/admin/planManagement/Printage",
        query:{
          id:row.id
        }
      });
    },
    setCourse(id){
      this.$router.push({
        path: "/admin/planManagement/setCourse",
        query: {
          id: id,
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
.button-group {
  cursor: pointer;
  margin-top: 50px;
  text-align: center;

  > div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
    }
  }
}
.message-container {
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {
    }
  }
}
.el-date-editor .el-range-separator {
    padding: 0 5px;
    line-height: 32px;
    width: 10%;
    color: #303133;
}
.plan-entry-table-container {
  margin-top: 15px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .bk-lucj-import-button {
    .export-button;
    width: 70px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    box-sizing: border-box;
    margin: 0 auto 12px;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #02c86c;
    }
  }
  .bk-lucj-expot-button {
    .export-button;
    width: 90px;
    background: #fef1e8;
    border: 1px solid #f86900;
    box-sizing: border-box;
    margin: 0 auto 12px;
    img{
      width: 17px;
      height: 17px;
    }
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #f86900;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/entry-results.less";
.plan-entry-table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>